<template>
  <view class="content">
    <view>
      <image src="../../static/images/cs.png" alt="" class="img" />
      <button class="long" @click="login">点击登录授权</button>
    </view>
    <view class="box">
      <button @click="qwe">
        <img src="../../static/images/fx.png" alt="" class="box1" /> 推荐好友
      </button>
      <button>
        <img src="../../static/images/gy.png" alt="" class="box1" /> 联系客服
      </button>
      <button>
        <img src="../../static/images/ds.png" alt="" class="box1" /> 意见反馈
      </button>
      <button>
        <img src="../../static/images/xh.png" alt="" class="box1" /> 极限选号
      </button>
      <button>
        <img src="../../static/images/ss.png" alt="" class="box1" /> 极限赛事
      </button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {};
  },
  onLoad() {},
  methods: {
    login() {
      wx.getUserProfile({
        desc:"登录",
        success:(res)=>{
            console.log(res);
        }
      })
    },
    qwe() {
      
    },
  },
};
</script>

<style>
.content {
  display: flex;
  flex-direction: column;
  align-items: center;
  /* justify-content: center; */
  height: 28rem;
  background-color: pink;
}

.img {
  width: 50px;
  height: 50px;
  border: 1px solid black;
  border-radius: 50px;
  margin-top: 10px;
  background: yellow;
  margin-left: 20px;
}
.long {
  height: 30px;
  font-size: 10px;
}
.box {
  width: 70%;
  height: 200px;
  background-color: white;
  margin-top: 20px;
}

button {
  width: 100%;
  font-size: 20px;
  overflow: hidden;
}
.box1 {
  width: 20px;
  height: 20px;
  margin-left: -100px;
  margin-right: 20px;
}
</style>

